import { createRouter, createWebHashHistory, RouterView } from 'vue-router'
import store from '@/store'
import { h } from 'vue'


const Layout = () =>
    import ('@/views/Layout')
const Home = () =>
    import ('@/views/home')
    // 顶级分类
const TopCategory = () =>
    import ('@/views/category/index')
    // 二级分类
const SubCategory = () =>
    import ('../views/category/sub.vue')
    // 商品详情
const Goods = () =>
    import ('@/views/goods/index')
    // 购物车
const Cart = () =>
    import ('@/views/cart/index')
    // 登录
const Login = () =>
    import ('@/views/login/index');
// const LoginCallback = () =>
//     import ('@/views/login/callback')
// const Checkout = () =>
//     import ('@/views/member/pay/checkout')
// const Pay = () =>
//     import ('@/views/member/pay/index')

// 个人中心
const MemberLayout = () =>
    import ('@/views/member/Layout')
const MemberHome = () =>
    import ('@/views/member/home');
// 我的订单
const MemberOrder = () =>
    import ('@/views/member/order')
const MemberOrderDetail = () =>
    import ('@/views/member/order/detail')
    // 结算
const Checkout = () =>
    import ('@/views/member/pay/checkout')
const Pay = () =>
    import ('@/views/member/pay/index')
const PayResult = () =>
    import ('@/views/member/pay/result')

// 路由规则
const routes = [
    // 一级路由布局容器
    {
        path: '/',
        component: Layout,
        children: [
            { path: '/', component: Home },
            { path: '/category/:id', component: TopCategory },
            { path: '/category/sub/:id', component: SubCategory },
            { path: '/product/:id', component: Goods },
            { path: '/cart', component: Cart },
            // { path: '/member/checkout', component: Checkout },
            // { path: '/member/pay', component: Pay },
            // { path: '/pay/callback', component: PayResult },
            { path: '/member/checkout', component: Checkout },
            { path: '/member/pay', component: Pay },
            { path: '/pay/callback', component: PayResult },
            {
                path: '/member',
                component: MemberLayout,
                children: [
                    { path: '/member', component: MemberHome },
                    // vue3不能这样写了，关于加id的
                    // { path: '/member/order', component: MemberOrder },
                    // { path: '/member/order/:id', component: MemberOrderDetail }
                    {
                        path: '/member/order/',
                        // 创建一个RouterView容器形成嵌套关系
                        // vue3.0 需要有嵌套关系才能模糊匹配    
                        component: { render: () => h( < RouterView / > ) },
                        children: [
                            { path: '', component: MemberOrder },
                            { path: ':id', component: MemberOrderDetail }
                        ]
                    }
                ]
            },





        ]
    },
    { path: '/login', component: Login }
]

// vue2.0 new VueRouter({}) 创建路由实例
// vue3.0 createRouter({}) 创建路由实例

// 创建一个路由实例
const router = createRouter({
    // 使用hash方式实现路由
    history: createWebHashHistory(),
    // 配置路由规则
    routes,
    // 每次切换到路由时滚动到到顶部
    scrollBehavior() {
        // vue2.0 x y 控制
        // vue3.0  left top 控制
        return { left: 0, top: 0 }
    }
})

//前置导航守卫
router.beforeEach((to, from, next) => {
    // 需要登陆的路由：地址是以 /member开头
    // 用户信息
    // console.log(store.state.user);
    // {token}表示获取后面数据下和token同名的数据
    const { token } = store.state.user.profile
        // 跳转去member开头的地址却没有登录
        //store/modules/user.js中的token要为空
    if (to.path.startsWith('/member') && !token) {
        // encodeURIComponent 将有特殊字符串的地址转换成url编码
        // 方法1 字符串拼接
        // return next('/login?redirectUrl=' + encodeURIComponent(to.fullPath))
        // 方法2 对象的方法
        return next({ path: '/login', query: { redirectUrl: to.fullPath } })
    }
    next()
})



export default router